import React, { PureComponent } from 'react';
import { Table, Avatar, Popover } from 'antd';

import styles from './user.module.css';

let COLUMNS = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '性别', dataIndex: 'gender', key: 'gender' },
  { title: '头像', dataIndex: 'avatar', key: 'avatar' },
  { title: '操作', key: 'operation' }
];

/**
 * 用户列表
 */
export default class UserTable extends PureComponent {

  constructor(props) {
    super(props);

    COLUMNS[1].render = this.renderGender;
    COLUMNS[2].render = this.renderAvatar;
    COLUMNS[3].render = this.renderOperation;
  }

  renderGender = (val) => {
    return <span>{val == 1 ? '男' : '女'}</span>
  }

  renderAvatar = (val) => {
    return (
      <Popover 
        content={<img className={styles.avatar} src={val} />} 
        trigger='hover'
      >
        <Avatar src={val} size='small' />
      </Popover>
    )
  }

  renderOperation = (val, item) => {
    return (
      <div className={styles.operation}>
        <a onClick={() => this.props.onRemove(item)}>删除</a>
        <a onClick={() => this.props.onUpdate(item)}>修改</a>
      </div>
    )
  }

  render() {
    const { items, loading } = this.props;

    return (
      <Table loading={loading} dataSource={items} columns={COLUMNS} />
    )
  }
}